/*
  学习目标：了解-Context优缺点
  
     缺点 :
      1. 增加组件嵌套结构
      2. 调试困难

    优点:
      1. React自带
     
     
*/

import React from 'react';

const { Provider, Consumer } = React.createContext();

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Provider value={[1, 2, 3]}>
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends React.Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <SonSon></SonSon>
      </div>
    );
  }
}

class SonSon extends React.Component {
  render() {
    return (
      <div>
        <h2> 孙子</h2>
        <SonSonSon></SonSonSon>
        <Consumer>
          {(data) => {
            return <h1>{data}</h1>;
          }}
        </Consumer>
      </div>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return <div>孙子的儿子</div>;
  }
}
